<template>
	<div id="container">
		<header>
			<van-nav-bar
			  title="修改用户名"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</header>
		<div id="content">
			<!-- 输入框 -->
			<input v-model="oldpname" type="text" class="old-pwd" placeholder="请输入当前用户名">
			<input v-model="newpname" type="text" class="new-pwd" placeholder="请输入新的用户名">
			<input v-model="repname" type="text" class="re-pwd" placeholder="请确认新的用户名">
			
			<!-- 按钮 -->
			<van-button type="danger" class="uppwd-confirm" @click="confirm()">确认</van-button>
		</div>
	</div>
</template>

<script>
	import * as api from '../../api/postuppwd'
	import {Dialog} from 'vant'
	export default{
		name:'Upuser',
		data(){
			return{
				oldpname:'',
				newpname:'',
				repname:''
			}
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			confirm(){
				// 实际当前用户名
				 let user=this.$store.state.usernames.replace(/会员/,'')
				 // 把输入的当前用户名和实际用户名对比
				if(this.oldpname==user){
					// 新用户名和确认用户名对比
					if(this.newpname==this.repname){
						var token=this.$store.state.tokens
						var uid=this.$store.state.uids
						api.postUpuser({uid:uid,username:this.repname},{headers:{token:token}}).then((data)=>{
							// 修改成功后把修改的名字传送给后台
							let username =this.repname+"会员"
							this.$store.commit('login',{username,uid,token})
							Dialog({message:'用户名修改成功'}).then(()=>{								
								this.$router.push('/mine')
							})
							
							
						})
					}
				}else{
					Dialog({message:'当前用户名输入错误'})
				}
				
			}
		}
	}
</script>

<style scoped>
#container{
	height: 100vh;
	background: #f3f3f3;
}
/* ---------------------header------------- */
header .van-nav-bar{
	height:47px;
	border:1px solid #f3f3f3;
}
header .van-nav-bar__title{
	font-size:20px;
	font-weight:600;
	font-family:"楷体";
}
header .van-nav-bar__text{
	font-size:18px;
	color: #000000;
	font-weight:600;
	font-family: "楷体";
}
header .van-icon-arrow-left{
	font-size: 18px;
	color: #000000;
}
/* --------------------content-uppwd------------------- */
#content{
	text-align: center;
}
#content input{
	border: 0;
	color: #000;
	font-size: 22px;
	font-family: "楷体";
	width: 340px;
	height: 66px;
	border-bottom: 2px solid #e7e7e7;
	background:#f3f3f3;
}
#content .van-button{
	border:0;
	border-radius: 4px;
	margin-top: 42px;
	width:342px;
	height:51px;
	font-size:25px;
	font-family: "楷体";
	color:#fff;
	background:#f8a89d;
}	
</style>
